<template>
    <div>列表页
     <el-table :data="tableData">
        <el-table-column prop="title" label="文章标题" width="200">
        </el-table-column>
        <el-table-column prop="body" label="文章内容" width="1400">
        </el-table-column>
        <!-- 右边操作按钮 -->
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <!-- **难点** 按钮想要绑定点击事件处理方法；需要传 对应参数 -->
            <el-button @click="handleClick(scope.row._id)" type="text" size="small">编辑</el-button>
            <el-button @click="deleteClick(scope.row._id)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
</template>

<script>
  export default {
    data() {
      return {

        tableData:[]
       
      }
    },
    
    methods:{
      
      /* 获取后端数据；更新视图 */
      updateList(){
        this.$http.get( 'articles' ).then( res =>{
        console.log( res) 
        this.tableData = res.articles ; //当axios拦截器不起作用使用res.data
          
        }).catch(err =>{
            this.$message.error('数据获取失败') 
            console.log(err)
          })
      },
      //编辑文章
      handleClick( id ){
        ///进行二次确认
        this.$confirm('确认重新编辑, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            //页面进行跳转
           this.$router.push(`/articles/edit/${id}`)
           }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
       },

      //删除事件 
      deleteClick( id){
        //删除前进行二次确认
        this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {    
          //  **难点** 使用模板字符串在请求路径中拼接动态参数 
        this.$http.delete( `articles/${id}`).then( res =>{
          //console.log(res)
          // 删除请求成功后；---------**更新视图***
          // 当axios拦截器不起作用使用res.data.status
          if( res.status ){
          // 当axios拦截器不起作用使用res.data.articles 
            this.tableData = res.articles ; 
        }
          //console.log(res.data)
        });
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    
       }
    },
    created(){
      /* 在created周期去后端获取数据；如果没成功提示失败 */
      this.updateList();
          
      
    }
  };
</script>